<style>
.MenuCheckBox{
	left: 200px;
	position: absolute;
}
#MenuManageDiv{
	width: 260px;
	height: 65vh;
	display: inline-block;
	border: 1px solid #088;
}
#PathManageDiv{
	width: 260px;
	height: 65vh;
	display: inline-block;
	border: 1px solid #088;
}
#GroupMenuTitleTd{
	top: -16px;
	position: relative;
	text-align: center;
}
#GroupMenuTitleTd img{
	top: 3px;
	width: 18px;
	height: 18px;
	position: relative;
}
#GroupMenuTitleTd span{
	color: #088;
	font-size: 16px;
	margin-left: 4px;
	letter-spacing: 1px;
}
</style>

<div id='GroupMenuDiv'>
	<table width='100%'>
		<tr><td id='GroupMenuTitleTd'><img v-bind:src='icon'/><span>角色[{{name}}]菜单管理</span></td></tr>
	</table>
	<div>
		<div style='display:inline-block'>
			<div></div>
			<div id='MenuManageDiv'>
				<div style='width:100%;height:100%;position:relative;overflow:hidden'>
					<div style='overflow-x:hidden;overflow-y:scroll;position:absolute'>
						<div></div>
					</div>
				</div>
			</div>
		</div>
		<div style='display:inline-block'>
			<div></div>
			<div id='PathManageDiv'>
				<div style='width:100%;height:100%;position:relative;overflow:hidden'>
					<div style='overflow-x:hidden;overflow-y:scroll;position:absolute'>
						<div></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<table style='width:100%'>
		<tr>
			<td><button class='TextButton' id='SaveGroupMenuButton' style='float:right;margin:8px 16px'>保存</button></td>
			<td><button class='TextButton' id='CloseGroupMenuButton' style='float:left;margin:8px 16px'>关闭</button></td>
		</tr>
	</table>
</div>

<script>
{
	let group = null;
	let menulist = null;
	let acceslist = null;
	let menubarlist = [];
	let pathbarlist = [];

	getHttpResult('/getmenulist', null, function(data){
		menulist = data.list;
	});

	getHttpResult('/getaccesslist', null, function(data){
		acceslist = data.list;
	});

	getHttpResult('/getgroupcontent', {id: '${groupid}'}, function(data){
		group = data;

		let menulist = group.menulist.split(',');
		let pathlist = group.pathlist.split(',');

		group['hasMenu'] = function(key){
			for (let i = 0; i < menulist.length; i++){
				
				if (key == menulist[i]) return true;
			}
			return false;
		}

		group['hasAccess'] = function(key){
			for (let i = 0; i < pathlist.length; i++){
				if (key == pathlist[i]) return true;
			}
			return false;
		}
	});

	let groupmap = new Map();
	let titlebar = $('#GroupMenuTitleTd');

	getVue('GroupMenuDiv', group);

	for (let i = 0; i < menulist.length; i++){
		let item = menulist[i];
		if (strlen(item.title) <= 0){
			groupmap.set(item.folder, {icon: item.icon, menu: [], access: []});
		}
		else{
			groupmap.get(item.folder).menu.push(item);
		}
	}

	for (let i = 0; i < menulist.length; i++){
		groupmap.get(menulist[i].folder).menu.sort(function(a, b){
			return a.position - b.position;
		});
	}

	for (let i = 0; i < acceslist.length; i++){
		groupmap.get(acceslist[i].folder).access.push(acceslist[i]);
	}

	let menucolor = {
		color: '#088',
		hovercolor: '#088',
		barcolor: 'rgba(0, 0, 0, 0)',
		listcolor: 'rgba(0, 0, 0, 0',
		selectcolor: 'rgba(0, 0, 0, 0)'
	}
	let titlecolor = {
		color: '#088',
		barcolor: '#555',
		hovercolor: '#088',
		listcolor: 'rgba(0, 0, 0, 0',
		selectcolor: 'rgba(0, 0, 0, 0)'
	}

	let menudiv = $('#MenuManageDiv');
	let pathdiv = $('#PathManageDiv');
	let menuview = menudiv.children().children().children();
	let pathview = pathdiv.children().children().children();

	let menutitle = new MenuBar(menudiv.prev(), '菜单管理', '/res/img/menu/menu.png');
	let pathtitle = new MenuBar(pathdiv.prev(), '资源管理', '/res/img/menu/link.png');
	menutitle.color(titlecolor);
	pathtitle.color(titlecolor);
	menutitle.tag.hide();
	pathtitle.tag.hide();

	function setup(menu, count, access){
		function select(elem, flag, updated){
			elem = getCtrl(elem);
			if (flag == 0){
				elem.indeterminate = false;
				elem.checked = false;
			}
			else if (flag == 1){
				elem.indeterminate = true;
				elem.checked = true;
			}
			else{
				elem.indeterminate = false;
				elem.checked = true;
			}
			if (updated) $(elem).change();
		}

		let listbox = menu.list.find('.MenuCheckBox');
		let checkbox = menu.bar.find('.MenuCheckBox');
		checkbox.change(function(){
			let checked = this.checked;
			listbox.each(function(){
				this.checked = checked;
			});
		}).click(function(e){
			e.stopPropagation();
		});
		listbox.change(function(){
			let num = 0;
			listbox.each(function(){
				if (this.checked) num++;
			});
			if (num <= 0){
				select(checkbox, 0);
			}
			else if (num < count){
				select(checkbox, 1);
			}
			else{
				select(checkbox, 2);
			}
		}).click(function(e){
			e.stopPropagation();
		}).each(function(){
			if (access){
				if (group.hasAccess($(this).attr('key'))) select(this, 2, true);
			}
			else{
				if (group.hasMenu($(this).attr('key'))) select(this, 2, true);
			}
		});
	}

	function getText(id, text){
		return "<span>" + text + "<span><input class='MenuCheckBox' type='checkbox' key='" + id + "' text='" + text + "'/>";
	}

	groupmap.forEach(function(data, folder){
		if (data.menu.length > 0){
			let menu = new MenuBar(menuview, getText(0, folder), data.icon);
			for (let i = 0; i < data.menu.length; i++){
				let item = data.menu[i];
				menu.add(getText(item.id, item.title), item.icon);
			}
			setup(menu, data.menu.length, false);
			menubarlist.push(menu);
			menu.color(menucolor);
		}

		if (data.access.length > 0){
			let menu = new MenuBar(pathview, getText(0, folder), data.icon);
			for (let i = 0; i < data.access.length; i++){
				let item = data.access[i];
				let path = item.path;
				if (strlen(item.param) > 0) path += '?' + item.param;
				menu.add(getText(path, item.name), '/res/img/menu/link.png');
			}
			setup(menu, data.access.length, true);
			pathbarlist.push(menu);
			menu.color(menucolor);
		}
　　});

	menuview.width(menudiv.width()).height(menudiv.height());
	pathview.width(pathdiv.width()).height(pathdiv.height());
	menudiv.css('background', menucolor.listcolor);
	pathdiv.css('background', menucolor.listcolor);

	$('#SaveGroupMenuButton').click(function(){
		let menulist = [];
		let pathlist = [];
		for (let i = 0; i < menubarlist.length; i++){
			menubarlist[i].list.find('.MenuCheckBox').each(function(){
				if (this.checked) menulist.push($(this).attr('key'))
			});
		}
		for (let i = 0; i < pathbarlist.length; i++){
			pathbarlist[i].list.find('.MenuCheckBox').each(function(){
				if (this.checked) pathlist.push($(this).attr('key'))
			});
		}

		group['flag'] = 'U';
		group['menulist'] = menulist.join(',');
		group['pathlist'] = pathlist.join(',');
	
		getHttpResult('/grouplist', group, function(data){
			if (data.code == XG_TIMEOUT){
				sessionTimeount();
			}
			else if (data.code == XG_AUTHFAIL){
				showNoAccessToast();
			}
			else if (data.code < 0){
				showToast('保存失败');
			}
			else{
				showToast('保存成功');
			}
		});
	});

	$('#CloseGroupMenuButton').click(function(){
		hideMsgBox();
		hideToastBox();
	});

	$('#XG_TOAST_DIV_ID').css('background-color', '#DDD');
}
</script>